<template>
  <div class="page">
    <Navbar title="数据礼包" />
    <div class="content">
      <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
        <van-empty v-if="!tableData.length" description="暂无数据" />

        <div class="list">
          <div
            v-for="(item,index) in tableData"
            :key="index"
            class="list-item"
          >
            <div class="top f-r">
              <div class="file-icon f-s">
                <img :src="fileIcon(item.fileType)" alt="">
              </div>
              <div class="file-name more-ellipsis clamp-2">{{ item.fileName }}.{{ item.fileUrl == null ?'':item.fileUrl.split('.')[item.fileUrl.split('.').length - 1] }}</div>
            </div>
            <div class="line" />
            <div class="handle-list f-r a-c">
              <div class="handle-item f-1 f-r j-c a-c" @click="downloadFile(item.fileUrl,item.fileName)">
                <img :src="downloadIcon" alt="">
                <span >下载查看</span>
              </div>
              <!-- <div class="handle-item f-1 f-r j-c a-c">
                <img :src="zhuanfaIcon" alt="">
                <span>一键转发</span>
              </div> -->
            </div>
          </div>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import refresh from '@/mixins/refresh'
import { http_datapackage } from '@/api'

import File_Icon from '@/assets/file.png'
import Excel_Icon from '@/assets/excel.png'
import Word_Icon from '@/assets/word.png'
import axios from 'axios'
export default {
  name: 'Project',
  mixins: [refresh],
  data() {
    return {
      downloadIcon: require('@/assets/home/download.png'),
      zhuanfaIcon: require('@/assets/home/zhuanfa.png'),
      tableData: [

      ]
    }
  },
  methods: {
    fileIcon(fileType) {
      if (['jpeg', 'gif', 'png'].indexOf(fileType) > -1) return File_Icon
      if (['xls', 'xlsx'].indexOf(fileType) > -1) return Excel_Icon
      if (['doc', 'docx'].indexOf(fileType) > -1) return Word_Icon
      return File_Icon
    },
    getList() {
      if (this.pageNo > 1) return
      const { projectId } = this.$route.query
      http_datapackage.fileList({
        projectId
      }).then(res => {
        this.tableData = res.data
        this.refreshLoading = false
      })
    },
    downloadFile(url, name) {
      console.log(url)
      // 个人赋值
    //  params = { taskCommonId: this.commonId };
      const fileName = url
      let fileTypeMime = '' // 文件mime类型
      // url = `${window._CONFIG['domianURL']}trial/task/plan/common/getFileByTaskCommonId`;
      let suffix = fileName.split('.') // split后获得文件后缀
      suffix = suffix[suffix.length - 1]
      switch (suffix) { // switch获取后缀对应的mime 可参考上文链接
        case 'png': fileTypeMime = 'image/png'; break
        case 'doc': fileTypeMime = 'application/msword'; break
        case 'docx': fileTypeMime = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'; break
        case 'jpg': case 'jpeg': fileTypeMime = 'image/jpeg'; break
        case 'gif': fileTypeMime = 'image/gif'; break
        case 'svg': fileTypeMime = 'image/svg+xml'; break
        case 'tif': case 'tiff': fileTypeMime = 'image/tiff'; break
        case 'txt': fileTypeMime = 'text/plain'; break
        case 'ppt': fileTypeMime = 'application/vnd.ms-powerpoint'; break
        case 'pptx': fileTypeMime = 'application/vnd.openxmlformats-officedocument.presentationml.presentation'; break
        case 'xls': fileTypeMime = 'application/vnd.ms-excel'; break
        case 'xlsx': fileTypeMime = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'; break
        case 'zip': fileTypeMime = 'application/zip'; break
        case '7z': fileTypeMime = 'application/x-7z-compressed'; break
      }
      console.log('=======')
      axios.get(
        url,
        { params: {},
          responseType: 'blob' } // 一定要设置响应类型，否则文件会是空白
      // params: params,
      ).then((data) => {
        console.log(data);
        const content = data // arraybuffer类型数据
        const resBlob = new Blob([content.data])
        const reader = new FileReader()
        reader.readAsText(resBlob, 'utf-8')
        reader.onload = () => {
          try { // 判断是否可以转化为json格式，可以就说明不是文件流，错误返回值
            const res = JSON.parse(reader.result)
            console.log(res)
            this.$message.destroy()
            this.$message.error(res.message)
          } catch { // 报错说明不能转化为json，是文件流，下载文件
            console.log('res status', data)
            // let blob = new Blob([data]); // 原 此种方式在pc端可以下载，但是手机端不行
            const blob = new Blob([data.data], {
              // eslint-disable-next-line no-undef
              'type': fileTypeMime
            })
            const blobUrl = window.URL.createObjectURL(blob)
            const a = document.createElement('a')
            a.style.display = 'none'
            a.download = name
            a.href = blobUrl
            a.click()
          }
        }
      })
    }

  }

}
</script>

<style scoped lang="scss">
.page {
    .list-item {
        width: 100%;
        background: #FFFFFF;
        border-radius: 10px;
        margin-bottom: 20px;
        .top {
           padding: 27px;
            .file-icon {
                width: 38px;
                height: 38px;
                margin-right: 20px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .file-name {
                padding-top: 10px;
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #333333;
                line-height: 18px;
                word-break: break-word;
            }
        }
        .handle-list {
            padding-top: 10px;
            padding-bottom: 10px;
            img {
                width: 13px;
                height: 12px;
                margin-right: 6px;
            }
            span {
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #2F86FD;
            }
        }
        .line {
            width: 100%;
            height: 1px;
            background-color:#E2E2E2 ;
        }
    }
}
</style>
